<template>
  <div class="archive">
    <!-- pc端展示的页面 -->
    <div class="pc">
      <div
        class="ar-right"
        v-loading="rightloading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="rtitle">标签云</div>
        <div class="rcount">
          <span>文章：{{ count }}</span>
          <span>分类：{{ catecount }}</span>
        </div>
        <div class="catebox">
          <div
            class="cate-item"
            v-for="(item, index) in categoryData"
            :key="index"
            :class="getClass(index)"
          >
            <span>{{ item.name }}</span>
            <span>{{ "(" + item.count + ")" }}</span>
          </div>
        </div>
      </div>
      <div
        class="ar-left"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="timelinebox">
          <div class="timeline">时间轴</div>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in articleData"
              :key="index"
              :timestamp="item.date"
              placement="top"
              type="primary "
            >
              <el-card>
                <p class="ititle">{{ item.title }}</p>
                <el-divider content-position="right">
                  {{
                  item.category[0]
                  }}
                </el-divider>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <!-- 手机端展示的页面 -->
    <div class="phone">
      <div
        class="ar-left"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <my-scroll>
          <div class="ar-right">
            <div class="rtitle">标签云</div>
            <div class="rcount">
              <span>文章：{{ count }}</span>
              <span>分类：{{ catecount }}</span>
            </div>
            <div class="catebox">
              <div
                class="cate-item"
                v-for="(item, index) in categoryData"
                :key="index"
                :class="getClass(index)"
              >
                <span>{{ item.name }}</span>
                <span>{{ "(" + item.count + ")" }}</span>
              </div>
            </div>
          </div>
          <div class="timelinebox">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in articleData"
                :key="index"
                :timestamp="item.date"
                placement="top"
                type="primary "
              >
                <el-card>
                  <p class="ititle">{{ item.title }}</p>
                  <el-divider content-position="right">
                    {{
                    item.category[0]
                    }}
                  </el-divider>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </my-scroll>
      </div>
    </div>
  </div>
</template>
<script>
import request from '../../api/request'
export default {
  name: 'archive',
  data() {
    return {
      loading: true,
      rightloading: true,
      articleData: [],
      categoryData: [],
      count: 0,
      catecount: 0,
      typeClass: ['primary', 'success', 'info', 'warning', 'danger'],
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: 'percent',
          detectResize: true
        },
        scrollPanel: {},
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: '#b3c0d1',
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: '6px',
          disable: false
        }
      }
    }
  },
  created() {
    this.getartile()
    this.getcategory()
    this.$store.commit('updatePath', '/module/archive')
  },
  computed: {
    getclass: function () {
      return function (index) {
        var newIndex = index % 5
        return this.typeClass[newIndex]
      }
    }
  },
  methods: {
    async getartile() {
      let res = await request({
        url: '/article/get',
        data: {},
        method: 'get'
      })
      this.articleData = []
      const { data, status, count } = res
      if (status) {
        data.forEach((item) => {
          item.date = this.$dateFormat(item.date)
        })
        this.articleData = Object.freeze(data)
        this.count = count
        this.loading = false
      }
    },
    async getcategory() {
      let res = await request({
        url: '/category/get',
        data: {},
        method: 'get'
      })
      this.categoryData = []
      const { data, status } = res
      if (status) {
        this.categoryData = Object.freeze(data)
        this.catecount = this.categoryData.length
        this.rightloading = false
      }
    },
    getClass(index) {
      var newIndex = index % 5
      return this.typeClass[newIndex]
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../scss/common.scss';
@media (min-width: 600px) {
  .archive {
    margin: 20px 0px;
    height: calc(100% - 40px);
    width: 100%;
    max-width: 1400px;
    background: white;
    display: flex;
    .pc {
      height: 100%;
      width: 100%;
      background: white;
      position: relative;
    }
    .phone {
      display: none;
    }
    .ar-title {
      position: absolute;
      top: -10px;
      left: -30px;
      width: 60px;
      height: 80px;
      background: #409eff;
      color: white;
      text-align: center;
      border-radius: 5px;
      z-index: 10;
      font-size: 20px;
      font-weight: bold;
      box-shadow: 0 10px 8px rgba(10, 16, 20, 0.24),
        0 0 8px rgba(10, 16, 20, 0.12);
      p {
        margin: 0px;
        height: 40px;
        line-height: 40px;
      }
    }
    .ar-left {
      box-sizing: border-box;
      padding: 10px;
      flex: 1;
      height: 100%;
      .timelinebox {
        padding: 10px 40px;
        padding-top: 50px;
        min-height: calc(100% - 80px);
        position: relative;
        .timeline {
          position: absolute;
          top: 0;
          left: 0;
          color: $ar_color;
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 20px;
        }
      }
    }
    .ar-right {
      flex: 1;
      background: rgb(235, 235, 235);
      position: relative;
      .rtitle {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 130px;
        letter-spacing: 15px;
        text-indent: 15px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background: $ar_color;
        color: white;
        text-align: center;
        border-radius: 5px;
        z-index: 999;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 10px 8px rgba(10, 16, 20, 0.24),
          0 0 8px rgba(10, 16, 20, 0.12);
      }
      .rcount {
        height: 80px;
        line-height: 80px;
        text-align: right;
        padding: 0px 20px;
        span {
          color: rgb(81, 131, 165);
          margin-left: 10px;
        }
      }
      .catebox {
        margin: 0px 5px;
        padding-bottom: 10px;
        .cate-item {
          display: inline-block;
          padding: 0px 10px;
          height: 30px;
          line-height: 30px;
          margin: 7px 5px;
          color: white;
          border-radius: 5px;
          box-shadow: 0 5px 8px rgba(10, 16, 20, 0.24),
            0 0 8px rgba(10, 16, 20, 0.12);
          span:nth-child(2) {
            margin-left: 5px;
          }
        }
      }
    }
    .el-card {
      line-height: 20px;
    }
    //    typeClass:["primary","success","info","warning","danger"],
  }
}
.primary {
  background: $ar_color;
}
.success {
  background: #61c031;
}
.info {
  background: #124e69;
}
.warning {
  background: #e6a23c;
}
.danger {
  background: #f56c6c;
}
/deep/ .el-timeline-item__node--primary {
  background-color: $ar_color;
}
/deep/ .el-loading-spinner i {
  color: $ar_color !important;
}
/deep/ .el-loading-text {
  color: $ar_color !important;
}
@media (max-width: 600px) {
  .archive {
    height: 100%;
    width: 100%;
    background: white;
    display: flex;
    position: relative;
    padding: 0px;
    .pc {
      display: none;
    }
    .ar-left {
      box-sizing: border-box;
      flex: 1;
      height: 100%;
      .timelinebox {
        padding: 20px;
        min-height: calc(100% - 40px);
      }
    }
    .ar-right {
      flex: 1;
      background: rgb(224, 226, 230);
      padding-bottom: 20px;
      position: relative;
      .rtitle {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 110px;
        letter-spacing: 15px;
        text-indent: 15px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        background: #409eff;
        color: white;
        text-align: center;
        border-radius: 5px;
        z-index: 999;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 10px 8px rgba(10, 16, 20, 0.24),
          0 0 8px rgba(10, 16, 20, 0.12);
      }
      .rcount {
        height: 70px;
        line-height: 70px;
        text-align: right;
        padding: 0px 20px;
        span {
          color: rgb(81, 131, 165);
          margin-left: 10px;
        }
      }
      .catebox {
        margin: 0px 5px;
        .cate-item {
          display: inline-block;
          padding: 0px 10px;
          height: 30px;
          line-height: 30px;
          font-size: 0.875rem;
          margin: 7px 5px;
          color: white;
          border-radius: 5px;
          box-shadow: 0 5px 8px rgba(10, 16, 20, 0.24),
            0 0 8px rgba(10, 16, 20, 0.12);
          span:nth-child(2) {
            margin-left: 5px;
          }
        }
      }
    }
    .el-card {
      line-height: 20px;
    }
    //    typeClass:["primary","success","info","warning","danger"],
  }
}
</style>
